import type { ProFormInstance } from '@ant-design/pro-form';
import React, { useRef, useState } from 'react';
import { Button, Popconfirm, Tag,  } from 'antd';
import { ActionType, ProColumns, ProTable,DrawerForm } from '@ant-design/pro-components';
import { ArrowRightOutlined, PlusOutlined } from '@ant-design/icons';
import * as api from '@/services/cdnDomain';
import * as utils from '@/utils/utils';

type FormProps = {
  open: boolean;
  current: API.CdnDomain | undefined;
  onCancel: () => void;
};

const Form: React.FC<FormProps> = (props) => {
  const { open, onCancel, current } = props;
  if (!open) {
    return null;
  }
  
  const formRef = useRef<ProFormInstance>();
  const actionRef = useRef<ActionType>();
  
  // const handleRemove = async (id: string) => {
  //   let result = await api.cdnDomainDnsRemove({key:id});
  //   if (result && result.success === true) {
  //     actionRef.current?.reload();
  //   }
  // };
  
  

  
  let columns: ProColumns<API.CdnDomainDns>[] = [
    {
      title: '名称',
      dataIndex: 'name',
      search:false,
      // width:160,
      // render: (_, record) => {
      //   return record.subnetMask > 0 ? <>{record.ip}/{record.subnetMask}</> : record.ip;
      // },
    },
    {
      title: 'IP地址',
      dataIndex: 'content',
      search:false,
      // width:150,
      // render: (_, record) => {
      //   return record.ipStart != record.ipEnd ? <>{record.ipStart}</> : '';
      // },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      // align: 'center',
      width: 160,
      // valueType:'date',
      search:false,
      // sorter: true,
      render:(_, record) => {
        return utils.formatDate(record.createTime);
      }
    },
    // {
    //   title: '结束IP',
    //   dataIndex: 'ipEnd',
    //   search:false,
    //   width:150,
    //   render: (_, record) => {
    //     return record.ipStart != record.ipEnd ? <>{record.ipEnd}</> : '';
    //   },
    // },
    // {
    //   title: '备注',
    //   dataIndex: 'remark',
    //   search:false,
    // },

  ];
  // columns = columns.concat([
  //   {
  //     title: '操作',
  //     dataIndex: 'option',
  //     valueType: 'option',
  //     width: 120,
  //     render: (_, record) => {
  //       let cmps = [];

  //         cmps.push(
  //           <a
  //             key="edit"
  //             onClick={(e) => {
  //               setFormVisible(true);
  //               setCurrent(record);
  //             }}
  //           >
  //             编辑
  //           </a>,
  //         );

  //         cmps.push(
  //           <Popconfirm
  //             key="delete"
  //             title="确定要删除吗?"
  //             onConfirm={async () => {
  //               await handleRemove(record.id);
  //             }}
  //           >
  //             <a>删除</a>
  //           </Popconfirm>,
  //         );

  //       return cmps;
  //     },
  //   },
  // ]);

  return (
    <DrawerForm<API.CdnDomainDns>
      open={open}
      width={1000}
      title={`域名解析`}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: true,
      }}
      submitter={{
        render: (props, defaultDoms) => {
          return [
            <Button
              key="create"
              onClick={() => {
                onCancel();
              }}
            >
              关闭
            </Button>];
        },
      }}
    >

      <ProTable
        rowKey="id"
        options={{
          fullScreen: false,
          reload: true,
          setting: false,
          density: false,
        }}
        headerTitle={current.name}
        columnEmptyText={''}
        formRef={formRef}
        actionRef={actionRef}
        columns={columns}
        search={{
          // span: 8,
          collapsed: false,
          filterType:'light',
        }}
        pagination={false}
        params={{domainId: current.id}}
        request={api.cdnDomainDnslist}
        // toolBarRender={() => {
        //   var toolbarDoms: any[] = [];

        //   toolbarDoms.push([
        //     <Button
        //       type="primary"
        //       key="create"
        //       onClick={() => {
        //         setFormVisible(true);
        //         setCurrentIp(undefined);
        //       }}
        //     >
        //       <PlusOutlined />
        //       新建
        //     </Button>
        //   ]);

        //   return toolbarDoms;
        // }}
      />



      

    </DrawerForm>
  );
};

export default Form;
